<template>
    <div style="height: 100%;">
        <a-spin :loading="pageLoading.value" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                :suppressDragLeaveHidesColumns="true" rowSelection="multiple" @grid-ready="gridReady" style="height:100%"
                class='ag-theme-alpine' :defaultColDef="defaultColDef" :rowData="table.dataList" :columnDefs="cfsValue"
                :localeText="localeTextData" @columnResized="onColumnResized" @columnMoved="onColumnMoved" />
        </a-spin>
        <!-- <paginationCopys :total="total" show-total show-jumper 
            show-page-size @change="changePage"  @page-size-change="changeSize" 
            style="justify-content: center;margin-top: 10px;"  :page-size="pagination.pageSize"
            :current="pagination.page" /> -->
    </div>
</template>  

<script lang="ts">

import emitter from "@/hooks/useEventBus";
import { localeText } from '@/api/aggridZw'
import { onMounted, reactive, ref } from 'vue';
import { Message, Modal } from '@arco-design/web-vue';
import { usePagination, useTable } from '@/hooks/table';
import { adjuct } from '@/api/DyeingshopManagement/circulatCardAdjuct';
import { MessageBox } from '@element-plus/icons-vue';
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
export default {
    name: 'cylinderAjuctInfo',
    components: {  },
    props: {
        searchData: {
            type: Object,
            default: () => { }
        }
    },
    setup(props, { emit }) {
        const adjuctApi = adjuct();
        const table = useTable();
        emitter.on("refresh-cylinderAjuctInfo", () => {
            pagination.page = 1;
            doRefresh();
        });
        emitter.on("stop-cylinderAjuctInfo", (cardState) => {
          console.log(cardState)
            let vals = gridOption.value.getSelectedRows();
            if (vals.length > 0) {
                let ids = vals.map((v: any) => { return { id: v.id, cardState } });
                if (cardState === 0) {
                    Modal.confirm({
                        title: '提示',
                        content: "确定要取消终止选中的流转卡？",
                        cancelText: "取消",
                        okText: "确认",
                        onOk: async () => {
                            const promises = ids.map((v: any) => {
                                return adjuctApi.updateCardStatus({ ...v });
                            });
                            Promise.all(promises).then((res: any) => {
                                let resStatus = res.every((v: any) => v.code === 200);
                                if (resStatus) {
                                    Message.success("操作成功");
                                    doRefresh();
                                } else {
                                    Message.error("操作失败");
                                }
                            }).catch(error => {
                                console.log(error)
                            });
                        }
                    })
                } else {
                    Modal.confirm({
                        title: '提示',
                        content: "确定要终止选中的流转卡？",
                        cancelText: "取消",
                        okText: "确认",
                        onOk: async () => {
                            const promises = ids.map((v: any) => {
                                return adjuctApi.updateCardStatus({ ...v });
                            });
                            Promise.all(promises).then((res: any) => {
                                let resStatus = res.every((v: any) => v.code === 200);
                                if (resStatus) {
                                    Message.success("操作成功");
                                    doRefresh();
                                } else {
                                    Message.error("操作失败");
                                }
                            }).catch(error => {
                                console.log(error)
                            });
                        }
                    })
                }
                console.log(ids);
            } else {
                Message.error({ content: '请选择需要操作的数据' })
            }

        });

        const pageLoading = ref(false)
        const doRefresh = async () => {
            pageLoading.value = true
            updateGridState01()
            await adjuctApi.getFindAdjuct({ ...props.searchData }).then(res => {
                if (res.code === 200) {
                    table.handleSuccess(res.data.list);
                    gridOption.value.setRowData(res.data.list);
                }
            }).catch(console.log).finally(() => {
                pageLoading.value = false
            })
        };

        const pagination = usePagination(doRefresh);
        //表格方面
        const gridOption = ref();
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
            colState.value = params.columnApi
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150
        };
        let cfsValue: any = [
            {
                headerName: "流转卡号",
                field: "flowCardCode",
                pinned: "left",
                cellRenderer: {
                    template: `<a-link @click="a">{{flowCardCode}}</a-link>`,
                    setup(props: any) {
                        const a = () => {
                            // editHandler(props.params.data)
                            emit('change-adjuct', props.params.data);
                        };
                        const flowCardCode = props.params.data.flowCardCode
                        return {
                            a,
                            flowCardCode
                        }
                    }
                }
            },
            {
                headerName: "开单日期",
                field: "createOrderDate",
            },
            {
                headerName: "设备编号",
                field: "machineCode",
            },
            {
                headerName: "客户名称",
                field: "customName",
            },
            {
                headerName: "计划单号",
                field: "planOrderCode",
            },
            {
                headerName: "合约号",
                field: "Contract",
            },
            {
                headerName: "加工类型",
                field: "machinType",
            },
            {
                headerName: "作业类型",
                field: "dyeingType",
            },
            {
                headerName: "等待工序",
                field: "process",
            },
            {
                headerName: "客户订单号",
                field: "clientPlanOrderCode",
            },
            {
                headerName: "色号",
                field: "colorCode",
            },
            {
                headerName: "色称",
                field: "colorName",
            },
            {
                headerName: "纱批",
                field: "yarnBatch",
            },
            {
                headerName: "最后一次调整人",
                field: "auditPerson",
            },
            {
                headerName: "最后一次调整时间",
                field: "auditDate",
            },
            {
                headerName: '状态',
                lockPosition: 'right',
                sortable: false,
                resizable: false,
                filter: false,
                width: 150,
                cellRenderer: {
                    template: `
                       <a-tag color="green" v-if="obsoleteState === 0" class="gesture">正常</a-tag>
                       <a-tag color="red"  v-else class="gesture">终止</a-tag> `,
                    setup(props: any) {
                        let obsoleteState = props.params.data.obsoleteState;
                        return {
                            obsoleteState
                        }
                    }
                }
            },
        ];

        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        cfsValue = a.concat(cfsValue);
        // const total = ref(10);
        // const changePage = (val:any) => {
        //     pagination.page = val
        //     doRefresh();
        // }
        // const changeSize = (val:any) => {
        //     pagination.pageSize = val
        //     doRefresh();
        // }

        const localeTextData: any = ref(localeText);
        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('cylinderAjuctInfo01', gridOption, colState, cfsValue)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        return {
            pageLoading,
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            pagination,
            table,
            localeTextData,
            // changePage,
            // changeSize,
            // total,
            cfsValue,
            defaultColDef,
            gridReady,
        }
    }

}
</script>

<style scoped></style>